<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>新闻后台管理</el-breadcrumb-item>
            <el-breadcrumb-item>新闻主页</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row style="margin: 15px 0;display: flex;justify-content: space-between">
            <el-col :span="11">
                <el-card class="box-card" shadow="hover">
                    <div id="echart1" style="margin: auto;width: 450px;height: 400px;"></div>
                </el-card>
            </el-col>
            <el-col :span="11">
                <el-card class="box-card" shadow="hover">
                    <div id="echart2" style=" margin: auto;width: 450px;height: 400px;"></div>
                </el-card>
            </el-col>
        </el-row>
        <el-row style="display: flex;justify-content: space-between">
            <el-col :span="23">
                <el-card class="box-card" shadow="hover">
                    <div id="echart3" style="width: 100%;height: 330px;"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {getEchartone, getEcharttwo, getEchartthree} from "@/api/Echarts";

export default {
    name: "homepage",
    data() {
        return {
            myEcharts: null,
            one1: [],
            one2: [],
            one3: [],
        };
    },
    mounted() {
        getEcharttwo().then(res => {
            this.one1 = res
            var chartDom = this.$el.querySelector('#echart1');
            var myChart1 = echarts.init(chartDom);
            var option1 = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '2%',
                    left: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: this.one1
                    }
                ]
            };
            myChart1.setOption(option1);
        })
        getEchartone().then(res => {
            let result = res.map(item => ({value: item.news_count, name: item.newclass}));
            this.one2 = result
            var chartDom2 = this.$el.querySelector('#echart2');
            var myChart2 = echarts.init(chartDom2);
            var option2 = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '2%',
                    left: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '60%',
                        data: this.one2,
                        label: {
                            position: 'outside',
                            formatter: '{b} ({d}%)' // 显示标签，包括名称和百分比
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart2.setOption(option2);
        })
        var chartDom3 = this.$el.querySelector('#echart3');
        var myChart3 = echarts.init(chartDom3);
        var option3 = {
            legend: {},
            tooltip: {},
            dataset: {
                source: [
                    ['product', '2021', '2022', '2023'],
                    ['星期一', Math.random() * 100, Math.random() * 100, Math.random() * 100],
                    ['星期二', Math.random() * 100, Math.random() * 100, Math.random() * 100],
                    ['星期三', Math.random() * 100, Math.random() * 100, Math.random() * 100],
                    ['星期四', Math.random() * 100, Math.random() * 100, Math.random() * 100],
                    ['星期五', Math.random() * 100, Math.random() * 100, Math.random() * 100],
                    ['星期六', Math.random() * 100, Math.random() * 100, Math.random() * 100],
                    ['星期日', Math.random() * 100, Math.random() * 100, Math.random() * 100],
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
        };
        myChart3.setOption(option3);
    },
}
</script>

<style scoped>

</style>
